<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico"
	href="http://www.datatables.net/favicon.ico" />

<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";

@import "../../media/css/demo_table.css";

input.engine {
	width: 100%;
}

input.version {
	width: 50px;
}
</style>
<script type="text/javascript" language="javascript"
	src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript"
	src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
			/* Create an array with the values of all the input boxes in a column */
			$.fn.dataTableExt.afnSortData['dom-text'] = function  ( oSettings, iColumn )
			{
				var aData = [];
				$( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
					aData.push( this.value );
				} );
				return aData;
			}
			
			/* Create an array with the values of all the select options in a column */
			$.fn.dataTableExt.afnSortData['dom-select'] = function  ( oSettings, iColumn )
			{
				var aData = [];
				$( 'td:eq('+iColumn+') select', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
					aData.push( $(this).val() );
				} );
				return aData;
			}
			
			/* Create an array with the values of all the checkboxes in a column */
			$.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, iColumn )
			{
				var aData = [];
				$( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
					aData.push( this.checked==true ? "1" : "0" );
				} );
				return aData;
			}
			
			/* Initialise the table with the required column sorting data types */
			$(document).ready(function() {
				$('#example').dataTable( {
					"aoColumns": [
						null,
						null,
						{ "sSortDataType": "dom-text" },
						{ "sSortDataType": "dom-text", "sType": "numeric" },
						{ "sSortDataType": "dom-select" },
						{ "sSortDataType": "dom-checkbox" }
					]
				} );
			} );
		</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big"><i>DataTables</i> live DOM sorting
example</div>

<h1>Preamble</h1>
<p>This example shows how you can use information available in the
DOM to sort columns. Typically DataTables will read information to be
sorted during it's initialisation phase, and this will not be updated
based on user interaction, so sorting on columns which have, for
example, form elements in them, may not reflect the current value of the
input. To overcome this problem, you must update the data that
DataTables will sort on, just prior to the sort. This method is much
more efficient than actually sorting using the DOM, since only one DOM
query is needed for each cell to be sorted.</p>
<p>The example below shows the first two columns as normal text with
sorting as you would expect. The following columns all have a form input
element of different kinds, and the information contained within is what
DataTables will perform the sort on, based on the value at the time of
the sort.</p>
<p>This is a fairly simple example, but it you aren't constrained to
just using form input elements, you could use anything and customise
your DOM queries to suit yourself. You could also update the sorting
live as a user in entered data into a form using an event handler
calling fnSort() or fnDraw().</p>

<h1>Live example</h1>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display"
	id="example">
	<thead>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
			<th>Check</th>
		</tr>
	</thead>
	<tbody>
		<tr class="gradeX">
			<td>Trident</td>
			<td>Internet Explorer 4.0</td>
			<td><input type="text" class="engine" value="Win 95+"></td>
			<td class="center"><input type="text" class="version" value="4"></td>
			<td class="center"><select size="1">
				<option value="A">A</option>
				<option value="C">C</option>
				<option value="X" selected="selected">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeC">
			<td>Trident</td>
			<td>Internet Explorer 5.0</td>
			<td><input type="text" class="engine" value="Win 95+"></td>
			<td class="center"><input type="text" class="version" value="5"></td>
			<td class="center"><select size="1">
				<option value="A">A</option>
				<option value="C" selected="selected">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Trident</td>
			<td>Internet Explorer 5.5</td>
			<td><input type="text" class="engine" value="Win 95+"></td>
			<td class="center"><input type="text" class="version"
				value="5.5"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Trident</td>
			<td>Internet Explorer 6</td>
			<td><input type="text" class="engine" value="Win 98+"></td>
			<td class="center"><input type="text" class="version" value="6"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Trident</td>
			<td>Internet Explorer 7</td>
			<td><input type="text" class="engine" value="Win XP SP2+"></td>
			<td class="center"><input type="text" class="version" value="7"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Trident</td>
			<td>AOL browser (AOL desktop)</td>
			<td><input type="text" class="engine" value="Win XP"></td>
			<td class="center"><input type="text" class="version" value="6"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Firefox 1.0</td>
			<td><input type="text" class="engine" value="Win 98+ / OSX.2+"></td>
			<td class="center"><input type="text" class="version"
				value="1.7"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Firefox 1.5</td>
			<td><input type="text" class="engine" value="Win 98+ / OSX.2+"></td>
			<td class="center"><input type="text" class="version"
				value="1.8"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Firefox 2.0</td>
			<td><input type="text" class="engine" value="Win 98+ / OSX.2+"></td>
			<td class="center"><input type="text" class="version"
				value="1.8"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Firefox 3.0</td>
			<td><input type="text" class="engine" value="Win 2k+ / OSX.3+"></td>
			<td class="center"><input type="text" class="version"
				value="1.9"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Camino 1.0</td>
			<td><input type="text" class="engine" value="OSX.2+"></td>
			<td class="center"><input type="text" class="version"
				value="1.8"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Camino 1.5</td>
			<td><input type="text" class="engine" value="OSX.3+"></td>
			<td class="center"><input type="text" class="version"
				value="1.8"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Netscape 7.2</td>
			<td><input type="text" class="engine"
				value="Win 95+ / Mac OS 8.6-9.2"></td>
			<td class="center"><input type="text" class="version"
				value="1.7"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Netscape Browser 8</td>
			<td><input type="text" class="engine" value="Win 98SE+"></td>
			<td class="center"><input type="text" class="version"
				value="1.7"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Netscape Navigator 9</td>
			<td><input type="text" class="engine" value="Win 98+ / OSX.2+"></td>
			<td class="center"><input type="text" class="version"
				value="1.8"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Mozilla 1.0</td>
			<td><input type="text" class="engine" value="Win 95+ / OSX.1+"></td>
			<td class="center"><input type="text" class="version" value="1"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Mozilla 1.1</td>
			<td><input type="text" class="engine" value="Win 95+ / OSX.1+"></td>
			<td class="center"><input type="text" class="version"
				value="1.1"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Mozilla 1.2</td>
			<td><input type="text" class="engine" value="Win 95+ / OSX.1+"></td>
			<td class="center"><input type="text" class="version"
				value="1.2"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Mozilla 1.3</td>
			<td><input type="text" class="engine" value="Win 95+ / OSX.1+"></td>
			<td class="center"><input type="text" class="version"
				value="1.3"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Mozilla 1.4</td>
			<td><input type="text" class="engine" value="Win 95+ / OSX.1+"></td>
			<td class="center"><input type="text" class="version"
				value="1.4"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Mozilla 1.5</td>
			<td><input type="text" class="engine" value="Win 95+ / OSX.1+"></td>
			<td class="center"><input type="text" class="version"
				value="1.5"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Mozilla 1.6</td>
			<td><input type="text" class="engine" value="Win 95+ / OSX.1+"></td>
			<td class="center"><input type="text" class="version"
				value="1.6"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Mozilla 1.7</td>
			<td><input type="text" class="engine" value="Win 98+ / OSX.1+"></td>
			<td class="center"><input type="text" class="version"
				value="1.7"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Mozilla 1.8</td>
			<td><input type="text" class="engine" value="Win 98+ / OSX.1+"></td>
			<td class="center"><input type="text" class="version"
				value="1.8"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Seamonkey 1.1</td>
			<td><input type="text" class="engine" value="Win 98+ / OSX.2+"></td>
			<td class="center"><input type="text" class="version"
				value="1.8"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Gecko</td>
			<td>Epiphany 2.20</td>
			<td><input type="text" class="engine" value="Gnome"></td>
			<td class="center"><input type="text" class="version"
				value="1.8"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Webkit</td>
			<td>Safari 1.2</td>
			<td><input type="text" class="engine" value="OSX.3"></td>
			<td class="center"><input type="text" class="version"
				value="125.5"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Webkit</td>
			<td>Safari 1.3</td>
			<td><input type="text" class="engine" value="OSX.3"></td>
			<td class="center"><input type="text" class="version"
				value="312.8"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Webkit</td>
			<td>Safari 2.0</td>
			<td><input type="text" class="engine" value="OSX.4+"></td>
			<td class="center"><input type="text" class="version"
				value="419.3"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Webkit</td>
			<td>Safari 3.0</td>
			<td><input type="text" class="engine" value="OSX.4+"></td>
			<td class="center"><input type="text" class="version"
				value="522.1"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Webkit</td>
			<td>OmniWeb 5.5</td>
			<td><input type="text" class="engine" value="OSX.4+"></td>
			<td class="center"><input type="text" class="version"
				value="420"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Webkit</td>
			<td>iPod Touch / iPhone</td>
			<td><input type="text" class="engine" value="iPod"></td>
			<td class="center"><input type="text" class="version"
				value="420.1"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Webkit</td>
			<td>S60</td>
			<td><input type="text" class="engine" value="S60"></td>
			<td class="center"><input type="text" class="version"
				value="413"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Presto</td>
			<td>Opera 7.0</td>
			<td><input type="text" class="engine" value="Win 95+ / OSX.1+"></td>
			<td class="center"><input type="text" class="version" value="-"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Presto</td>
			<td>Opera 7.5</td>
			<td><input type="text" class="engine" value="Win 95+ / OSX.2+"></td>
			<td class="center"><input type="text" class="version" value="-"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Presto</td>
			<td>Opera 8.0</td>
			<td><input type="text" class="engine" value="Win 95+ / OSX.2+"></td>
			<td class="center"><input type="text" class="version" value="-"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Presto</td>
			<td>Opera 8.5</td>
			<td><input type="text" class="engine" value="Win 95+ / OSX.2+"></td>
			<td class="center"><input type="text" class="version" value="-"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Presto</td>
			<td>Opera 9.0</td>
			<td><input type="text" class="engine" value="Win 95+ / OSX.3+"></td>
			<td class="center"><input type="text" class="version" value="-"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Presto</td>
			<td>Opera 9.2</td>
			<td><input type="text" class="engine" value="Win 88+ / OSX.3+"></td>
			<td class="center"><input type="text" class="version" value="-"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Presto</td>
			<td>Opera 9.5</td>
			<td><input type="text" class="engine" value="Win 88+ / OSX.3+"></td>
			<td class="center"><input type="text" class="version" value="-"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Presto</td>
			<td>Opera for Wii</td>
			<td><input type="text" class="engine" value="Wii"></td>
			<td class="center"><input type="text" class="version" value="-"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Presto</td>
			<td>Nokia N800</td>
			<td><input type="text" class="engine" value="N800"></td>
			<td class="center"><input type="text" class="version" value="-"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Presto</td>
			<td>Nintendo DS browser</td>
			<td><input type="text" class="engine" value="Nintendo DS"></td>
			<td class="center"><input type="text" class="version"
				value="8.5"></td>
			<td class="center"><select size="1">
				<option value="A">A</option>
				<option value="C" selected="selected">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeC">
			<td>KHTML</td>
			<td>Konqureror 3.1</td>
			<td><input type="text" class="engine" value="KDE 3.1"></td>
			<td class="center"><input type="text" class="version"
				value="3.1"></td>
			<td class="center"><select size="1">
				<option value="A">A</option>
				<option value="C" selected="selected">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>KHTML</td>
			<td>Konqureror 3.3</td>
			<td><input type="text" class="engine" value="KDE 3.3"></td>
			<td class="center"><input type="text" class="version"
				value="3.3"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>KHTML</td>
			<td>Konqureror 3.5</td>
			<td><input type="text" class="engine" value="KDE 3.5"></td>
			<td class="center"><input type="text" class="version"
				value="3.5"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeX">
			<td>Tasman</td>
			<td>Internet Explorer 4.5</td>
			<td><input type="text" class="engine" value="Mac OS 8-9"></td>
			<td class="center"><input type="text" class="version" value="-"></td>
			<td class="center"><select size="1">
				<option value="A">A</option>
				<option value="C">C</option>
				<option value="X" selected="selected">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeC">
			<td>Tasman</td>
			<td>Internet Explorer 5.1</td>
			<td><input type="text" class="engine" value="Mac OS 7.6-9"></td>
			<td class="center"><input type="text" class="version" value="1"></td>
			<td class="center"><select size="1">
				<option value="A">A</option>
				<option value="C" selected="selected">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeC">
			<td>Tasman</td>
			<td>Internet Explorer 5.2</td>
			<td><input type="text" class="engine" value="Mac OS 8-X"></td>
			<td class="center"><input type="text" class="version" value="1"></td>
			<td class="center"><select size="1">
				<option value="A">A</option>
				<option value="C" selected="selected">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeA">
			<td>Misc</td>
			<td>NetFront 3.1</td>
			<td><input type="text" class="engine" value="Embedded devices"></td>
			<td class="center"><input type="text" class="version" value="-"></td>
			<td class="center"><select size="1">
				<option value="A">A</option>
				<option value="C" selected="selected">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeA">
			<td>Misc</td>
			<td>NetFront 3.4</td>
			<td><input type="text" class="engine" value="Embedded devices"></td>
			<td class="center"><input type="text" class="version" value="-"></td>
			<td class="center"><select size="1">
				<option value="A" selected="selected">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeX">
			<td>Misc</td>
			<td>Dillo 0.8</td>
			<td><input type="text" class="engine" value="Embedded devices"></td>
			<td class="center"><input type="text" class="version" value="-"></td>
			<td class="center"><select size="1">
				<option value="A">A</option>
				<option value="C">C</option>
				<option value="X" selected="selected">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox" checked="checked"></td>
		</tr>
		<tr class="gradeX">
			<td>Misc</td>
			<td>Links</td>
			<td><input type="text" class="engine" value="Text only"></td>
			<td class="center"><input type="text" class="version" value="-"></td>
			<td class="center"><select size="1">
				<option value="A">A</option>
				<option value="C">C</option>
				<option value="X" selected="selected">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeX">
			<td>Misc</td>
			<td>Lynx</td>
			<td><input type="text" class="engine" value="Text only"></td>
			<td class="center"><input type="text" class="version" value="-"></td>
			<td class="center"><select size="1">
				<option value="A">A</option>
				<option value="C">C</option>
				<option value="X" selected="selected">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeC">
			<td>Misc</td>
			<td>IE Mobile</td>
			<td><input type="text" class="engine" value="Windows Mobile 6"></td>
			<td class="center"><input type="text" class="version" value="-"></td>
			<td class="center"><select size="1">
				<option value="A">A</option>
				<option value="C" selected="selected">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeC">
			<td>Misc</td>
			<td>PSP browser</td>
			<td><input type="text" class="engine" value="PSP"></td>
			<td class="center"><input type="text" class="version" value="-"></td>
			<td class="center"><select size="1">
				<option value="A">A</option>
				<option value="C" selected="selected">C</option>
				<option value="X">X</option>
				<option value="U">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
		<tr class="gradeU">
			<td>Other browsers</td>
			<td>All others</td>
			<td><input type="text" class="engine" value="-"></td>
			<td class="center"><input type="text" class="version" value="-"></td>
			<td class="center"><select size="1">
				<option value="A">A</option>
				<option value="C">C</option>
				<option value="X">X</option>
				<option value="U" selected="selected">U</option>
			</select></td>
			<td class="center"><input type="checkbox"></td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
			<th>Check</th>
		</tr>
	</tfoot>
</table>
</div>
<div class="spacer"></div>


<h1>Initialisation code</h1>
<pre>/* Create an array with the values of all the input boxes in a column */
$.fn.dataTableExt.afnSortData['dom-text'] = function  ( oSettings, iColumn )
{
	var aData = [];
	$( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
		aData.push( this.value );
	} );
	return aData;
}

/* Create an array with the values of all the select options in a column */
$.fn.dataTableExt.afnSortData['dom-select'] = function  ( oSettings, iColumn )
{
	var aData = [];
	$( 'td:eq('+iColumn+') select', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
		aData.push( $(this).val() );
	} );
	return aData;
}

/* Create an array with the values of all the checkboxes in a column */
$.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, iColumn )
{
	var aData = [];
	$( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
		aData.push( this.checked==true ? "1" : "0" );
	} );
	return aData;
}

/* Initialise the table with the required column sorting data types */
$(document).ready(function() {
	$('#example').dataTable( {
		"aoColumns": [
			null,
			null,
			{ "sSortDataType": "dom-text" },
			{ "sSortDataType": "dom-text", "sType": "numeric" },
			{ "sSortDataType": "dom-select" },
			{ "sSortDataType": "dom-checkbox" }
		]
	} );
} );</pre>


<h1>Other examples</h1>
<h2>Basic initialisation</h2>
<ul>
	<li><a href="../basic_init/zero_config.html">Zero
	configuration</a></li>
	<li><a href="../basic_init/filter_only.html">Feature
	enablement</a></li>
	<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
	<li><a href="../basic_init/multi_col_sort.html">Multi-column
	sorting</a></li>
	<li><a href="../basic_init/multiple_tables.html">Multiple
	tables</a></li>
	<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
	<li><a href="../basic_init/dom.html">DOM positioning</a></li>
	<li><a href="../basic_init/state_save.html">State saving</a></li>
	<li><a href="../basic_init/alt_pagination.html">Alternative
	pagination styles</a></li>
	<li><a href="../basic_init/language.html">Change language
	information (internationalisation)</a></li>
	<li><a href="../basic_init/themes.html">ThemeRoller themes
	(Smoothness)</a></li>
</ul>

<h2>Advanced initialisation</h2>
<ul>
	<li><a href="../advanced_init/events_pre_init.html">Events
	(pre initialisation)</a></li>
	<li><a href="../advanced_init/events_post_init.html">Events
	(post initialisation)</a></li>
	<li><a href="../advanced_init/column_render.html">Column
	rendering</a></li>
	<li><a href="../advanced_init/html_sort.html">Sorting without
	HTML tags</a></li>
	<li><a href="../advanced_init/dom_multiple_elements.html">Multiple
	table controls (sDom)</a></li>
	<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar
	(element) around table</a></li>
	<li><a href="../advanced_init/sorting_control.html">Set
	sorting controls</a></li>
	<li><a href="../advanced_init/complex_header.html">Column
	grouping through col/row spans</a></li>
	<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
	<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
	<li><a href="../advanced_init/footer_callback.html">Footer
	callback</a></li>
	<li><a href="../advanced_init/language_file.html">Change
	language information from a file (internationalisation)</a></li>
</ul>

<h2>Data sources</h2>
<ul>
	<li><a href="../data_sources/dom.html">DOM</a></li>
	<li><a href="../data_sources/js_array.html">Javascript array</a></li>
	<li><a href="../data_sources/ajax.html">Ajax source</a></li>
	<li><a href="../data_sources/server_side.html">Server side
	processing</a></li>
</ul>

<h2>Server-side processing</h2>
<ul>
	<li><a href="../server_side/server_side.html">Obtain
	server-side data</a></li>
	<li><a href="../server_side/custom_vars.html">Add extra HTTP
	variables</a></li>
	<li><a href="../server_side/post.html">Use HTTP POST</a></li>
	<li><a href="../server_side/column_ordering.html">Custom
	column ordering (in callback data)</a></li>
	<li><a href="../server_side/pipeline.html">Pipelining data
	(reduce Ajax calls for paging)</a></li>
	<li><a href="../server_side/row_details.html">Show and hide
	details about a particular record</a></li>
	<li><a href="../server_side/select_rows.html">User selectable
	rows (multiple rows)</a></li>
</ul>

<h2>API</h2>
<ul>
	<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
	<li><a href="../api/multi_filter.html">Individual column
	filtering</a></li>
	<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
	<li><a href="../api/row_details.html">Show and hide details
	about a particular record</a></li>
	<li><a href="../api/select_row.html">User selectable rows
	(multiple rows)</a></li>
	<li><a href="../api/select_single_row.html">User selectable
	rows (single row) and delete rows</a></li>
	<li><a href="../api/editable.html">Editable rows (with
	jEditable)</a></li>
	<li><a href="../api/form.html">Submit form with elements in
	table</a></li>
	<li><a href="../api/counter_column.html">Index column (static
	number column)</a></li>
	<li><a href="../api/show_hide.html">Show and hide columns
	dynamically</a></li>
	<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>

<h2>Plug-ins</h2>
<ul>
	<li><a href="../plug-ins/plugin_api.html">Add custom API
	functions</a></li>
	<li><a href="../plug-ins/sorting_plugin.html">Sorting and type
	detection</a></li>
	<li><a href="../plug-ins/paging_plugin.html">Custom pagination
	controls</a></li>
	<li><a href="../plug-ins/range_filtering.html">Range filtering
	/ custom filtering</a></li>
	<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
</ul>


<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i>
documentation</a> for full information about its API properties and methods.</p>


<div id="footer" style="text-align: center;"><span
	style="font-size: 10px;"> DataTables &copy; Allan Jardine
2008-2009. </span></div>
</div>
</body>
</html>